<template>
  <div>
    <van-nav-bar title="标题" />
    <van-form @submit="onSubmit">
      <!-- name:用户传给后端的key值,收集到的数据就是它的值,组成一对键值对
            label:标题
            rules:检验规则
            pattern:自定义正则表达式规则
       -->
      <van-field required v-model="user.mobile" autocomplete="off" name="mobile" label="手机号" placeholder="请填写手机号"
        :rules="[{ 
          required: true, 
          message: '请输入正确的11位手机号',
          pattern: /^1[3-9]\d{9}$/ 
          }]" />
      <van-field required v-model="user.code" type="password" name="code" label="密码" placeholder="请填写密码" :rules="[{ 
          required: true, 
          message: '请输入6位密码',
          pattern: /^\d{6}$/
          }]" />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" loading-text="加载中ing..." :loading="isLoading"
          :disabled="isLoading">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
  import {loginApi} from '@/api/index.js'
  import {setToken} from '../../utils/token.js'
  export default {
    name:'Login',
    data() {
      return {
        user: {
          // 手机号
          mobile: '13266325622',
          // 密码
          code: '246810'
        },
        isLoading: false
      }
    },
    methods: {
      async onSubmit(v) {
        // 表单会把数据对象收集到这个v形参里面等同于this.user,可以打印看看
        this.isLoading = true // 禁用按钮
        try {
          let {data:res} = await loginApi(this.user)
          console.log(res,'login')
          // 存储下次无感续签的新token
          setToken('refresh',res.data.refresh_token)
          setToken('hmtt',res.data.token) 
          // 引入组件后，会自动在 Vue 的 prototype 上挂载 $notify 方法，便于在组件内调用。
          this.$notify({
            type: 'success',
            message: '登录成功',
          });
          this.$router.replace({
            path: this.$route.query.path || 'layout/home'
          })
        } catch (e) {
          console.log(e)
          this.$notify({
            type: 'danger',
            message: '登录失败',
          });
        }
        this.isLoading = false // 恢复按钮
      }
    }
  }
</script>

<style scoped lang="less">
  // /deep/.van-nav-bar{
  //   background-color:#006EEB ;
  // }
  // /deep/.van-nav-bar__title{
  //   color: white;
  // }
</style>
